<template>
    <div class="container">
      <!-- 使用 HeaderComponent 组件，并传递 activeCard 和 cards 属性 -->
      <header-component :active-card="activeCard" :cards="cards" @change-card="changeCard" />
  
      <!-- 使用 FinancialCardComponent 组件 -->
      <financial-card-component />
  
      <!-- 使用 MainContentComponent 组件 -->
      <main-content-component />
  
      <!-- 使用 FooterComponent 组件 -->
      <footer-component />
    </div>
  </template>
  
  <script>
  import HeaderComponent from './HeaderComponent.vue';
  import FinancialCardComponent from './FinancialCardComponent.vue';
  import MainContentComponent from './MainContentComponent.vue';
  import FooterComponent from './FooterComponent.vue';
  
  export default {
    components: {
      HeaderComponent,
      FinancialCardComponent,
      MainContentComponent,
      FooterComponent
    },
    data() {
      return {
        activeCard: 0, // 这将用来追踪当前激活的卡片
        cards: [
          { title: "登录查看资产情况" },
          { title: "账户资产（折算人民币）", content: "999,999.99" },
          { title: "昨日收益（元）", content: "******" },
          { title: "昨日收益（元）", content: "10,000.00" },
          // 根据需要添加更多卡片对象
        ],
      };
    },
    methods: {
      changeCard(index) {
        this.activeCard = index; // 当选择卡片时更新激活卡片的索引
      },
      navigateTo(page) {
        this.$router.push(page); // 程序化地导航到不同的路由
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(to bottom, #d9eddb, #f5fffa);
  }
  
  /* 根据需要为主组件添加额外的样式 */
  </style>